<style lang="less">
@import "./login.less";
.login .ivu-input-wrapper .ivu-input {
  border-radius: 18px !important ;
}
</style>

<template>
  <div class="login" @keydown.enter="handleSubmit">
    <div class="login-con">
      <div>
        <div
          style="text-align: center;font-size:24px;font-weight:700;letter-spacing:2px;padding:20px 10px;color:#fff;"
        >
          <!--<img src="./../images/loginChaoda.png" alt="" style="width:245px;">-->
          智慧消防应用管理平台
        </div>
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules">
            <Row>
              <Col span="6" style="font-size:18px;color:#fff;line-height:32px;">用户名：</Col>
              <Col span="18">
                <FormItem prop="username">
                  <Input v-model="form.username" placeholder="请输入用户名" size="medium"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="6" style="font-size:18px;color:#fff;line-height:32px;">密码：</Col>
              <Col span="18">
                <FormItem prop="password">
                  <Input type="password" v-model="form.password" placeholder="请输入密码" size="medium"></Input>
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span="6">&nbsp</Col>
              <Col span="18">
                <FormItem>
                  <Button
                    @click="handleSubmit"
                    type="primary"
                    long
                    :loading="isLoading"
                    shape="circle"
                    size="large"
                    :disabled="isLoading"
                  >登&nbsp&nbsp录</Button>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import authRouter from "@/router/authRouters";
import funcRouter from "@/router/funcRouter";
import { mapMutations, mapActions } from "vuex";
import { getMenuNav } from "@/api/system";
import { recursionRouter } from "@/libs/util";
export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      },
      isLoading: false
    };
  },
  methods: {
    ...mapMutations(["updateMenuList", "getUserInfo"]),
    ...mapActions(["handleLogin", ""]),
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let username = this.form.username;
          let password = this.form.password;
          let captcha = "1111";
          this.isLoading = true;
          try {
            //清空localStorage
            localStorage.clear();
            this.handleLogin({ username, password, captcha }).then(res => {
              if (res.code == 0) {
                this.getMenuNav();
                // this.isLoading = false;
              } else {
                this.isLoading = false;
              }
            });
          } catch (err) {
            this.isLoading = false;
            this.$Loading.error();
            console.log(err);
          }
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    async getMenuNav() {
      let res = await getMenuNav();
      if (res.code == 0) {
        this.getUserInfo(res);
        //存储按钮权限
        sessionStorage.setItem("permissions", JSON.stringify(res.permissions));
        //添加路由
        let realRoutes = recursionRouter(authRouter, res.menu);
        this.$router.addRoutes(realRoutes);
        this.$router.addRoutes(funcRouter);
        //添加左边的菜单
        this.updateMenuList(realRoutes);
        this.$router.push({
          name: this.$config.homeName
        });
        
      }
    }
  }
};
</script>

<style>
</style>
